<script setup lang="ts">
import { onMounted, ref } from 'vue'
import request from '../../../utils/request'
import type { ChannelData, Channel } from '../../../types/news'
import { useNewsStore } from '../../../stores/news'
const store = useNewsStore()
// defineProps<{
//   activeId: number
// }>()

// const emit = defineEmits<{
//   // 指定子传父事件名和传递数据类型
//   (e: 'change', id: number): void
// }>()

// 频道数据指定类型
// type Res = {
//   message: string
//   data: {
//     channels: {
//       id: number
//       name: string
//     }[]
//   }
// }
// type ChannelItem = {
//   id: number
//   name: string
// }
// type Res = {
//     channels: ChannelItem[]
// }

// interface Data {
//   channels: Channel[];
// }

// interface Channel {
//   id: number;
//   name: string;
// }

// 频道数据
const channels = ref<Channel[]>([])

// 获取频道数据
const getChannels = async () => {
  // 用法1：request.get泛型第一个参数指定的是res.data的类型=》没有简化数据返回
  // const res = await request.get<Res>('/channels')
  // console.log('频道数据：', res.data.data.channels)
  // 用法2：request.get泛型第二个参数指定的是res的类型=》配合拦截器简化返回：response.data.data
  // 说明：any 相当于传了个 null
  const res = await request.get<any, ChannelData>('/channels')
  console.log('频道数据：', res.channels)
  channels.value = res.channels
}

onMounted(() => {
  getChannels()
})
</script>
<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        @click="store.changeChannel(item.id)"
        class="item"
        :class="{ active: item.id === store.activeId }"
        href="javascript:;"
        v-for="item in channels"
        :key="item.id"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
